<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡开关</title>
</head>
<body>
    <img id="light" src="off.png" alt="">
    <script>
    /*
    分析:
       1.获取图片元素的对象
       2.绑定单击事件
       3.每次点击切换图片
           规则：
             如果开的就变成关闭的
             如果关闭的，就变成亮的
          定义开关：flag   
    */
   //获取元素对象
   var img = document.getElementById("light");
   //开关
   var flag = false;
   //给对象绑定单机事件
   img.onclick = function () {
       //判断灯泡目前是开还是关
       if(flag){
        //灯泡是开的，把它变成关闭
        img.src="off.png";
        flag = false;


       }else{
           //灯泡是关闭的，把它变成开的
           img.src="on.png";
           flag = true;
       }
   }
    </script>
</body>
</html>
